<template>
    <van-nav-bar title="商品详情" left-arrow @click-left="$router.go(-1)" :fixed="true">
        <template #right>
            <van-icon name="ellipsis" size="45" @click="showShare = true" />
        </template>
    </van-nav-bar>
    <div class="bigbox">
        <!-- 分享面板 -->
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in imgs">
                <img :src=item alt="" @click="showpic(item)">
            </van-swipe-item>
        </van-swipe>
        <div class="price">
            ￥<span>{{ price }}</span>
        </div>
        <div class="proname">
            <span class="brand">{{ brand }}</span>
            <span class="pname">{{ proname }}</span>
        </div>
        <div class="getvoucher">
            <van-cell title="此商品可享受优惠" is-link value="点击领券" />
        </div>
        <div class="prodetail">
            <span>商品详情:</span><br>{{ prodetail }}
        </div>
    </div>
    <!-- 评论区   不登录不显示 -->
    <div class="comon" v-show="userid">
        <div class="box">
            评论区
        </div>
        <div v-for="item in comlist">
            <div class="useid">
                {{ item.userid }}
            </div>
            <div class="rate">
                <van-rate v-model="item.value" readonly />
            </div>
            <div>
                {{ item.message }}
            </div>
        </div>
    </div>
    <!-- 加入购物车按钮 -->
    <div>
        <van-action-bar :placeholder="true">
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="tocar" />
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-button type="warning" text="加入购物车" @click="onClickIcon" />
            <van-action-bar-button type="danger" text="立即购买" @click="topay" />
        </van-action-bar>
    </div>
    <van-dialog v-model:show="show" title="登录即可添加,去登录?" show-cancel-button confirm-button-color="red" @confirm="wipedata">
    </van-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter, } from 'vue-router';
import { GetPromsg, ProCartAdd } from '@/api/api'
import { showToast, showImagePreview } from 'vant';
import { useUserInfoStore } from '@/stores/useInfo';
import { getComon } from '@/api/api';



const store = useUserInfoStore()//获取登录数据
const showShare = ref(false)//是否显示分享页面
const router = useRouter()//路由
const proid = router.currentRoute.value.query.id//商品id
const userid = store.getUserId//登录用户id
const imgs = ref<any[]>([])//轮播图数据
const price = ref()//价格
const proname = ref()//商品名
const brand = ref()//商家
const prodetail = ref()//商品详情
const num = ref(1)//加入购物车数量(默认1)
const show = ref(false)
const showpiclist = ref<any[]>([])
const flag = ref(false)
const comlist = ref<any[]>([])



const getcom = async () => {
    const res = await getComon()
    console.log(res.data);
    res.data.forEach((item: any) => {
        if (item.proid == proid) {
            comlist.value.push(item)
        }
    })
}

//分享组件
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];
const onSelect = (option: any) => {
    showToast(option.name)
    showShare.value = false
}

//获取商品信息
onMounted(async () => {
    getcom()
    const res = await GetPromsg(proid)
    console.log(res);
    if (res.data.code === '200') {
        imgs.value.push(res.data.data.img1, res.data.data.img2, res.data.data.img3, res.data.data.img4)
        price.value = res.data.data.originprice
        proname.value = res.data.data.proname
        brand.value = res.data.data.brand
        prodetail.value = res.data.data.desc
    }
})

//去登录
const wipedata = () => {
    router.push('/login')
}

//跳转到购物车
const tocar = () => {
    router.push('/car')
}
//跳转到付款页面
const topay = () => {
    router.push('/pay')
}

//调用加入购物车接口
const onClickIcon = async () => {
    if (!userid) {
        console.log('请先登录');
        show.value = true
    } else {
        const params = {
            userid,
            proid,
            num: num.value
        }
        const res = await ProCartAdd(params)
        console.log(res);
        if (res.data.code === '200') {
            showToast({
                message: res.data.message,
                position: 'middle'
            })
        }
    }

}

//展示图片
const showpic = (item: any) => {
    showpiclist.value = []
    showpiclist.value.push(item)
    showImagePreview(showpiclist.value)
}

</script>

<style lang="scss" >
.comon {
    margin-top: 20px;
    margin-bottom: 50px;

    .box {
        line-height: 30px;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        color: red;
    }
}


.bigbox {
    margin-top: 50px;
}

:root:root {
    --van-cell-text-color: red;
    --van-cell-value-color: red;
}

.prodetail {
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px;
    padding: 0 10px;

    span {
        font-weight: 600;
    }
}

.proname {
    padding: 0 10px;

    .brand {
        background-color: red;
        color: white;
        border-radius: 10px;
        padding: 3px;
    }

    .pname {
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
    }
}

.price {
    margin-top: 10px;
    color: palevioletred;
    font-weight: 900;
    font-size: 18px;
    margin-left: 20px;
    margin-bottom: 20px;

    span {
        font-size: 30px;
        font-weight: 600;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 300px;

    img {
        height: 100%;
    }
}
</style>